<!-- filepath: src/components/CreateAssistantDialog.vue -->
<script setup>
import { ref, reactive, watch, computed } from 'vue'
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'

/**
 * @description 创建助手的对话框组件
 * @props {Boolean} modelValue - 控制对话框显示/隐藏 (v-model)
 * @emits update:modelValue - 更新 modelValue 的事件 (v-model)
 * @emits confirm - 用户点击确认创建时触发，携带助手数据 { title: string, prompt: string }
 */

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  },
})

const emit = defineEmits(['update:modelValue', 'confirm'])

// 控制对话框内部的显示状态，与 v-model 同步
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

// 表单数据
const form = reactive({
  title: '',
  prompt: '',
})

// 表单引用，用于校验
const formRef = ref(null)

// 表单校验规则
const rules = reactive({
  title: [{ required: true, message: '请输入助手名称', trigger: 'blur' }],
  prompt: [{ required: true, message: '请输入提示词', trigger: 'blur' }],
})

// 监听对话框打开，打开时重置表单
watch(dialogVisible, (newVal) => {
  if (newVal) {
    resetForm()
  }
})

/**
 * @description 重置表单内容和校验状态
 */
const resetForm = () => {
  form.title = '新助手' // 默认值
  form.prompt = ''
  formRef.value?.resetFields() // 清除校验状态
}

/**
 * @description 处理取消操作
 */
const handleCancel = () => {
  dialogVisible.value = false
}

/**
 * @description 处理确认创建操作
 */
const handleConfirm = async () => {
  if (!formRef.value) return
  try {
    // 校验表单
    await formRef.value.validate()
    // 校验通过，触发 confirm 事件，并关闭对话框
    emit('confirm', { ...form }) // 传递表单数据的副本
    dialogVisible.value = false
  } catch (error) {
    // 校验失败，Element Plus 会自动提示错误
    console.log('表单校验失败', error)
    ElMessage.warning('请检查输入项')
  }
}
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="创建新助手"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :append-to-body="true"
    class="create-assistant-dialog"
    @close="handleCancel"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
      <el-form-item label="助手名称" prop="title">
        <el-input v-model="form.title" placeholder="请输入助手名称" />
      </el-form-item>
      <el-form-item label="提示词 (Prompt)" prop="prompt">
        <el-input
          v-model="form.prompt"
          type="textarea"
          :rows="5"
          placeholder="请输入助手的提示词或指令"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel" class="cancel-button">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm-button">
          创建
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
// 对话框样式调整，使用 :deep() 影响 Element Plus 内部元素
:deep(.el-dialog) {
  border-radius: $border-radius-m;
  background-color: $light-bg; // 使用背景色

  .el-dialog__header {
    padding: 16px 20px;
    margin-right: 0; // 覆盖 Element Plus 默认 margin
    border-bottom: 1px solid $shadow-dark; // 分隔线
    background-color: transparent; // 头部背景透明，使用 dialog 背景

    .el-dialog__title {
      color: $text-primary;
      font-weight: 500;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: $text-secondary;
        &:hover {
          color: $primary-color;
        }
      }
    }
  }

  .el-dialog__body {
    padding: 20px; // 主体区域内边距
    background-color: transparent; // 主体背景透明

    .el-form-item__label {
      color: $text-primary; // 标签颜色
      margin-bottom: 8px; // 标签和输入框间距
    }

    // 输入框样式 - 应用内凹效果
    .el-input__wrapper,
    .el-textarea__inner {
      background-color: $light-bg;
      box-shadow: $box-shadow-inner-m;
      border-radius: $border-radius-m;
      border: none; // 移除默认边框
      padding: 1px 11px; // Element Plus 默认内边距，根据需要调整
      color: $text-primary;
      transition: box-shadow $transition-duration $transition-timing-function; // 添加过渡

      &:focus, // .el-input__wrapper 的 focus 状态
      &.is-focus // .el-textarea__inner 的 focus 状态
      {
        box-shadow: $box-shadow-outer-m; // 焦点时外凸效果
      }
    }
    // 特别处理 textarea 的 padding
    .el-textarea__inner {
      padding: 5px 11px; // textarea 需要不同的 padding
    }

    // 移除输入框 focus 时的默认 outline 或 border
    .el-input__wrapper:focus,
    .el-textarea__inner:focus {
      outline: none;
      border: none;
    }
    // 覆盖输入框错误状态下的红色边框，改为阴影提示？或者保持红色？这里先保持
    // .el-form-item.is-error .el-input__wrapper,
    // .el-form-item.is-error .el-textarea__inner {
    //   box-shadow: 0 0 0 1px var(--el-color-danger) inset; // 保持 Element Plus 的错误样式
    // }
  }

  .el-dialog__footer {
    padding: 16px 20px;
    border-top: 1px solid $shadow-dark; // 分隔线
    background-color: transparent; // 脚部背景透明
    text-align: right; // 按钮默认居右

    .dialog-footer {
      // 增加一层 div 便于布局控制
      // 按钮样式调整
      .el-button {
        border-radius: $border-radius-m;
        border: none; // 移除默认边框
        padding: 8px 16px; // 统一按钮内边距

        // 取消按钮 - 类似默认按钮样式
        &.cancel-button {
          background-color: $light-bg;
          box-shadow: $box-shadow-outer-m; // 外凸
          color: $text-primary;
          @include botton-hover-active-effect(1.05, 0.95); // 应用点击效果

          &:hover {
            background-color: $primary-hover; // 悬停背景
          }
        }

        // 确认按钮 - 主色调按钮样式
        &.confirm-button {
          background-color: $primary-color;
          color: white;
          box-shadow: $box-shadow-outer-m; // 外凸
          @include botton-hover-active-effect(1.05, 0.95); // 应用点击效果

          &:hover {
            opacity: 0.9; // 轻微透明
          }
        }
      }
    }
  }
}
</style>
